<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>支付</title>
		{% load static %}
		<link rel="stylesheet" href="{% static 'news/css/user_vip.css' %}">

	</head>
	<body>
		<div id="head"></div>
		<div id="body_1"><span id="s1"><strong>支付&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'news:my_vip' %}">返回</a></strong></span>
			</div>
		<div id="body_2">
			<div id="body_3">
				<div id="body_4">
					<p class="p1"><strong>支付金额:</strong> <span class="sp1">￥0.00</span> &nbsp;&nbsp;原VIP{{user.vip}}级抵扣<span id="an1">￥0</span></p>
					<div id="xz">
						请选择购买方式
					</div>
					<form action="{% url 'news:recharge'%}" method="post">
						{% csrf_token %}
						<input type="radio" name="g" id="v1" value="1"  class="v1" />
						<input type="radio" name="g" id="v2" value="2" class="v1"/>
						<input type="radio" name="g" id="v3" value="3" class="v1"/>
						<input type="radio" name="f" id="v6" value="500" class="v1"/>
						<input type="radio" name="z" id="v4" value="wx" class="v1"/>
						<input type="radio" name="z" id="v5" value="zfb" class="v1"/>
						<input type="hidden" name="rmb" id="rmb">
						<input type="hidden" name="number" id="number">
						<label for="v1" id="vip1" class="vip1"><img src="{% static 'news/images/chongzhi/v1.png' %}" class="v4"> <span class="sp2">￥2000</span><span class="sp3">每个月可免费发 <br>布2条新闻</span></label>
						<label for="v2" id="vip2" class="vip1"><img src="{% static 'news/images/chongzhi/v2.png' %}" class="v4"><span class="sp2">￥5000</span><span class="sp3">每个月可免费发 <br>布5条新闻</span></label>
						<label for="v3" id="vip3" class="vip1"><img src="{% static 'news/images/chongzhi/v3.png' %}" class="v4"><span class="sp2">￥10000</span><span class="sp3">每个月可免费发 <br>布10条新闻</span></label>

						<label for="v4" id="vip4" class="vip2"><img src="{% static 'news/images/chongzhi/we.png' %}" class="v4"></label>
						<label for="v5" id="vip5" class="vip2"><img src="{% static 'news/images/chongzhi/zfb.png' %}" class="v4"></label>
						<input type="submit" id="tj" value="确认支付" />
					</form>
					<p id="xz_1">请选择支付方式</p>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

	<script type="text/javascript">
		vip = {{user.vip}}
		if(vip==0){
			$('#an1').html('￥0');
			d = 0
		};
		if(vip==1){
			$('#an1').html('￥2000');
			d = 2000
		};
		if(vip==2){
			$('#an1').html('￥3000');
			d = 3000
		};
		if(vip==3){
			$('#an1').html('￥4000');
			d = 4000
		};


		{% if succeed %}
			alert('{{succeed}}')
		{% endif %}



		$('.vip1').click(function(){
			for(var i in $('.vip1')){
				$('.vip1').css({'border':'#D9D9D9 1px solid'})
			}
			$(this)[0].style.border = 'blue 2px solid'
		})

			var a = document.getElementsByClassName('vip1');

			a[0].onclick = function(){
				c = 2000-d;
				if(c<0){c = 0;};
				$('.sp1').html('￥'+c+'.00');
				$('#rmb')[0].value = c;
				$('#number')[0].value = 2;
				};

			a[1].onclick = function(){c = 5000-d;$('.sp1').html('￥'+c+'.00');$('#rmb')[0].value = c;$('#number')[0].value =5;};

			a[2].onclick = function(){c = 10000-d;$('.sp1').html('￥'+c+'.00');$('#rmb')[0].value = c;$('#number')[0].value = 10;};
			<!--a[3].onclick = function(){-->
				<!--$('.sp1').html('￥500.00')-->
			<!--}-->

		$('.vip2').click(function(){
			for(var i in $('.vip2')){
				$('.vip2').css({'border':'#D9D9D9 1px solid'})
			}
			$(this).css({'border':'blue 2px solid'})
		})
		if(!$('.v1').val()){
			console.log(111)
		}
		$('#tj').click(function(){
			console.log($('.v1').value)
			console.log($('.v1')[0].value)
		})

	</script>
</html>
</html>